<template>
    <div class="details">
      <van-sticky :offset-top="0">
        <div
        class="order">
          <li
          v-for="date in dates"
          :key='date.id'
          is="router-link"
          :to="{path:date.path, query:{url: $route.query.url}}"
          ><span>{{date.text}}</span></li>
        </div>
      </van-sticky>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="details_container"
      >
       <div
       v-for="item in list"
       :key="item.id"
       is="router-link"
       class="details_item"
       :to="{name: 'SpecDetails', params: {id: item.id}}"
       tag="div"
       >
       <img :src="item.image" alt="">
       <span class="font-title">{{item.title}}</span>
       <div class="price">
          <span style="color:red;font-weight:bold;margin-right:20px">￥{{item.price}}</span>
          <span style="color:blue">{{item.saleNum}}&nbsp;购买</span>
       </div>
       </div>
       </van-list>

      <router-view />
  </div>
</template>

<script>
import { getDetails } from '@/api/details'
export default {
  name: 'Details',
  data () {
    return {
      list: [],
      lists: [],
      loading: false,
      finished: false,
      page: 1,
      styles: 'ago',
      dates: [
        {
          id: 1,
          text: '综合',
          path: '/details'
        },
        {
          id: 2,
          text: '销量',
          path: '/sales'
        },
        {
          id: 3,
          text: '价格',
          path: '/price'
        },
        {
          id: 4,
          text: '新品',
          path: '/news'
        }
      ]
    }
  },
  created () {
    console.log(this, '1')
  },
  methods: {
    onLoad () {
      // 异步更新数据
      getDetails(this.$route.query.url, this.page).then(res => {
        console.log(res)
        this.lists = this.lists.concat(res)
        this.lists.sort(function (a, b) { // b-a大于0交换顺序
          return b.saleNum - a.saleNum
        })
        this.list = this.lists
        this.page += 1
        this.loading = false
        if (res.length === 0) {
          this.finished = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.details {
    // margin-top:40px;
    width: 100%;
    .details_container {
      height: 310px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .details_item {
      border-bottom: 1px solid #efefef;
      width: 48%;
      margin: 6px 0;
      .price span{
        font-size: 15px;
      }
      .font-title{
        font-size: 12px;
        margin-left:5px;
        margin-right: 5px;
        text-align: center;
      }
      img {
        max-width: 100%;
      }
     }
     .line{
      width: 90%;
      color: red;
    }
    }
    .order{
      background: white;
      width: 100%;
      height:40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom:1px solid #f0f0f0;
      background: #e9edf6;
      a{
        text-decoration: none;
        color: #a2a2a2;
        font-size: 14px;
      }
    }
  }
  .router-link-active {
    span{
      color: red;
    }
  }
</style>
